<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/css/myDocPage.css">
    <script src="/static/layui.js"></script>
</head>
<body>
<div>
    <h1>1. 弹出层事件监听与绑定</h1>
    <h2>1.1 给按钮绑定弹出层事件</h2>
    <div>
        <button id="msgButton">最简单的msg弹窗</button>

    </div>
    <h2>1.2 提示型alert弹窗</h2>
    <div>
        <button id="alert1">操作成功弹窗, 并监听点击确认</button>
        <button id="alert2">操作失败弹窗</button>
        <button id="alert3">疑问弹窗</button>
    </div>
    <h2>1.3 等待用户选择型alert</h2>
    <div>
        <button id="alert11">操作成功弹窗</button>
    </div>
    <h2>1.4 open弹窗</h2>
    <div>
        <button id="open1">操作成功弹窗</button>
    </div>
    <h2>1.5 加载中动画</h2>
    <div>
        <button id="loading">触发加载中</button>
    </div>
    <h2>1.6 在指定的元素上提供弹窗</h2>
    <div>
        <button id="tips">tips弹窗</button>
    </div>
    <h2>1.7 需要输入信息进行交互型</h2>
    <div>
        <button id="showInputAlertButton">输入信息并确认的button</button>
    </div>
</div>
</body>
<script>

    layui.use('layer', function(){
        let layer = layui.layer, $ = layui.$;

        $('#msgButton').click(function () {
            layer.msg("简单的提示");
        });

        $('#alert1').click(function () {
            layer.alert('操作成功', {
                icon: 2
                , yes: function () {
                    layer.msg("点击了确认");
                }
            });
        });

        $('#alert2').click(function () {
            layer.alert('操作失败', {icon: 2});
        });

        $('#alert3').click(function () {
            layer.alert('出现问题', {icon: 3});
        });

        $('#alert11').click(function () {
            layer.alert('酷毙了', {
                icon: 3
                , closeBtn: 1    // 是否显示关闭按钮
                , anim: 0 // 动画类型, 取值有0~6, 为不同的动画样式, 参考官网.
                , btn: ['确认', '取消'] //按钮
                , yes: function () {    // 默认是给第一个按钮绑定事件
                    layer.msg("点击了确认按钮");
                }
                , btn2: function () {   //从第二个按钮开始进行编号
                    layer.msg("点击了取消按钮");
                }
            });
        });

        $('#open1').click(function () {
            layer.open({
                content: '测试回调'
                , yes: function(index, layero){ // 该回调携带两个参数，分别为当前层索引、当前层DOM对象
                    layer.msg("点击了确认按钮");
                    layer.close(index); //如果设定了yes回调，需进行手工关闭
                }
            });
        });


        $('#loading').click(function () {
            layer.msg("发起ajax, 开启加载中动画");
            let index = layer.load(2, {time: 10 * 1000});
            layer.close(index); // 在ajax的回调中关闭这个弹出层
        });


        $('#tips').click(function () {
            layer.tips('只想提示地精准些', '#tips');
        });

        $('#showInputAlertButton').click(function () {
            layer.prompt({
                formType: 2,
                value: '',
                title: '请输入复制课程的新名称',
                area: ['400px', '150px'] //自定义文本域宽高
            }, function(value, index, elem){
                console.log($(elem).val(), 117);
                $(elem).parent().parent().find('a').addClass("layui-btn-disabled").attr("disabled",true);
                if ( value.trim() === '' ) {
                    layer.msg("课程名称不能为空");
                    $(elem).val('');
                    return;
                }
                setTimeout(function () {
                    $(elem).parent().parent().find('a').removeClass("layui-btn-disabled").attr("disabled",false);
                    layer.close(index);
                }, 3000);

            });
        });

    });

</script>
</html>